<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="我的小蜂巢" />
		<view class="plan-dage-backView">
			<swiper previous-margin='80px' next-margin='80px' @change="swiperChange" :style="{'height': swiperH}"
				:current="nowIdx">
				<swiper-item v-for="(item, index) in badgelist" :key="index" class="swiper-item-class">
					<view :class="`${nowIdx == index ? 'viewle-active':''} plan-dage-borderTwo`"
						:style="getItemStyles(item)">
						<view :class="`${nowIdx==index? 'viewle-active':''}  plan-dage-borderThree`"
							:style="getBprderStyles()">
							<image class='le-img le-active' :src='item.imgUrl' :style="{'height': imageH}"
								mode="aspectFit"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="plan-dage-titleContentView">
				<view class="plan-adge-titleStr">{{itemData.title}}</view>
				<view class="plan-adge-titleDescribe">{{itemData.badgeInfo}}</view>
				<view class="plan-adge-titleNumber" v-if="itemData.isLight == true">点亮于{{itemData.createTime}}
				</view>
				<view class="plan-adge-titleNumber" v-else>未点亮</view>
			</view>
			<!-- <button class="shareButtonClass" wx:if="{{itemData.isLight == true}}" bindtap="toshareTap">分 享</button> -->
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				badgelist: [],
				itemData: {},
				transparency: 0.5,
				nowIdx: 0, //当前swiper索引
				imgList: [], //图片列表
				msgStrList: [], //描述列表
				swiperH: 335 + "px", //设置高度
				swiperW: 168 + "px", //设置宽度
				borderLvh: 221 + "px",
				borderLvw: 164 + "px",
				borderh: 209 + "px",
				borderw: 152 + "px",
				imageH: 205 + "px", // 图片高度
				ImageW: 148 + "px", //图片宽度
			}
		},
		onLoad(options) {
			console.log('options', options);
			var receiveData = JSON.parse(options.badgeData);
			console.log('receiveData', receiveData);
			this.getBageData(receiveData);
		},
		methods: {
			getItemStyles(item) {
				return {
					backgroundColor: item.color,
					height: this.borderLvh,
					width: this.borderLvw
				};
			},
			getBprderStyles() {
				return {
					height: this.borderh,
					width: this.borderw
				}
			},
			swiperChange: function(e) {
				this.nowIdx = e.detail.current;
				this.itemData = this.badgelist[e.detail.current];
			},
			//获取一类型徽章列表
			getBageData: function(receiveData) {
				var formData = {
					'badgeType': receiveData.badgeType,
				}
				var that = this;
				this.$http.getBeePlanBadgeSeries(formData).then(res => {
					if (res.code == 200) {
						var badgelist = res.data.map(function(item) {
							if (item.isLight == true) {
								item.imgUrl = item.imgUrl + 'on.png';
							} else {
								item.imgUrl = item.imgUrl + 'off.png';
								item.color = '#fff'
							}
							return item;
						});
						var selectIndex = 0;
						for (let index = 0; index < badgelist.length; index++) {
							const element = badgelist[index];
							if (element.id == receiveData.id) {
								selectIndex = index;
							}
						}
						this.badgelist = badgelist;
						this.nowIdx = selectIndex;
						this.itemData = badgelist[selectIndex];
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 分享按钮点击事件
			toshareTap: function() {
				// uni.navigateTo({
				// 	url: '/wordClock/pages/wordClickBadgeShareDetailView/wordClickBadgeShareDetailView?badgeImgUrl=' +
				// 		this.data.badgelist[this.data.nowIdx].imgUrl,
				// })
			},
		}
	}
</script>

<style lang="less">
	.plan-dage-backView {
		width: 100%;
		height: 100%;
		background-color: #140e01;
	}

	swiper {
		padding-top: 60px;
	}

	.le-img {
		width: 100%;
		display: block;
		transform: scale(0.8);
		transition: all 0.3s ease;
		border-radius: 28px;
	}

	.le-img.le-active {
		transform: scale(1);
		border-radius: 43px;
	}

	.swiper-item-class {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.plan-dage-borderThree {
		display: flex;
		background-color: #969696;
		align-items: center;
		justify-content: center;
		border-radius: 43px;
	}

	.viewle-active {
		/* transform: scale(1); */
		border-radius: 43px;
	}

	.plan-dage-borderTwo {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 43px;
	}

	.plan-dage-titleContentView {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 40px;
	}

	.plan-adge-titleStr {
		font-size: 23px;
		font-weight: bolder;
		color: white;
		text-align: center;
		font-family: 'hzgb';
	}

	.dagelvNumber {
		font-size: 13px;
	}

	.plan-adge-titleDescribe {
		font-size: 15px;
		color: rgb(204, 204, 204);
		text-align: center;
		margin-top: 8px;
	}

	.plan-adge-titleNumber {
		font-size: 13px;
		color: rgb(204, 204, 204);
		text-align: center;
		margin-top: 8px;
	}

	.shareButtonClass {
		margin-top: 20px;
		width: 200px;
		height: 35px;
		border-radius: 18px;
		line-height: 35px;
		font-size: 15px;
		background: var(--themThesaurusBackColor);
		color: black;
		font-weight: bolder;
		text-align: center;
	}
</style>